<template>
  <!-- 权限管理界面 -->
  <div class="warp">
    <div class="heard">
      <Top></Top>
    </div>
    <div class="btn">
      <el-button class="returnKeyBtn" @click="returnKeyBtn">返回</el-button>
      <div style="width: 270px">
        <el-input
          placeholder="请输入用户关键字段查询"
          v-model="userSeek"
          ref="inputRef"
          @input="input"
          class="inp1 input-with-select"
        >
        </el-input>
      </div>
      <el-button
        class="returnKeyBtn"
        @click="search"
        :disabled="userSeek == '' ? true : false"
        >查用户名</el-button
      >
      <el-button
        class="returnKeyBtn"
        @click="search1"
        :disabled="userSeek == '' ? true : false"
        >查姓名</el-button
      >
       <el-button
        class="returnKeyBtn"
        @click="search3"
        :disabled="userSeek == '' ? true : false"
        >查电话</el-button
      >
      <el-button class="returnKeyBtn xinzeng" @click="add">新增</el-button>
    </div>

    <el-table
      :data="dataArr"
      :row-class-name="tableRowClassName"
      height="76%"
      header-align="center"
      :cell-style="{ padding: '9px 0' }"
      class="user-qx-table"
      :header-row-style="{ background: 'rab(44,64,115)' }"
    >
      <el-table-column property="id" label="序号" width="100" align="center">
      </el-table-column>
      <el-table-column
        property="loginName"
        label="用户名"
        width="180"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="150"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
        <el-table-column
        property="telephone"
        label="电话"
        width="150"
        show-overflow-tooltip
        align="center"
      ></el-table-column>
      <el-table-column label="权限" min-width="10" align="center">
        <template slot-scope="scope">
          <el-checkbox
            class="permissionSetting"
            v-for="(item, i) in scope.row.permissionSettingArr"
            :key="i"
            v-model="item.value"
            @change="permissionSettingBtn(scope.row, item)"
            >{{ item.title }}</el-checkbox
          >
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <span v-show="scope.row.loginName !== loginUserInfi.loginName">
            <el-button
              type="primary"
              title="重置密码"
              size="mini"
              icon="el-icon-s-promotion"
              @click="resetThePassword(scope.row)"
              circle
            ></el-button>

            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除"
              @click="deleteUsers(scope.row)"
              circle
            ></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block fenye" v-show="foot1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="block fenye" v-show="foot">
      <el-pagination
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="pageNo1"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total1"
      >
      </el-pagination>
    </div>
    <div class="block fenye" v-show="foot3">
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="pageNo2"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2"
      >
      </el-pagination>
    </div>
    <div class="block fenye" v-show="foot4">
      <el-pagination
        @size-change="handleSizeChange3"
        @current-change="handleCurrentChange3"
        :current-page="pageNo3"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize3"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total3"
      >
      </el-pagination>
    </div>

    <div class="froot"></div>
    <!-- 用户新增弹窗 -->
    <el-dialog
      title="用户新增"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      class="user-info"
    >
      <el-form :model="userNewForm" :rules="rules" ref="userNewForm">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="userNewForm.name"
            autocomplete="off"
            min="1"
            max="32"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="bankAccountNumber"
        >
          <el-input
            v-model="userNewForm.bankAccountNumber"
            autocomplete="off"
            placeholder="由5-32位大小字母和数字组成"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="phone-btn"
          label="手机号"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="userNewForm.phoneNumber"
            autocomplete="off"
            type="text"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="Email" :label-width="formLabelWidth">
          <el-input v-model="userNewForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="userNewForm.password"
            autocomplete="off"
            placeholder="由8-32位大小字母和数字组成"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          :label-width="formLabelWidth"
          prop="passwordAffirm"
        >
          <el-input
            v-model="userNewForm.passwordAffirm"
            autocomplete="off"
            placeholder="由8-32位大小字母和数字组成"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="用户身份" :label-width="formLabelWidth">
          <el-radio-group v-model="userNewForm.userIdentity">
            <el-radio :label="'sys_admin'">管理员</el-radio>
            <el-radio :label="'corp_user'">普通用户</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="用户权限选择">
          <div class="jurisdiction-box">
            <el-checkbox v-model="shuisheng">水生态</el-checkbox>
            <el-checkbox v-model="daqi">大气生态</el-checkbox>
            <el-checkbox v-model="senlin">森林防火</el-checkbox>
            <el-checkbox v-model="jinggai">智能井盖</el-checkbox>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 重置用户密码的弹窗 -->
    <el-dialog
      title="重置用户密码"
      :visible.sync="resetPasswordBox"
      width="460px"
      class="sms-code-box"
      top="25vh"
    >
      <el-form :model="resetPasswordInif" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="resetUserInif.loginName"
            autocomplete="off"
            type="text"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          prop="newPassword"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="resetPasswordInif.newPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="affirmNewPassword"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="resetPasswordInif.passwordAffirm"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetPasswordBox = false">取 消</el-button>
        <el-button type="primary" @click="resetPasswordBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Top from "@/components/top/Top.vue";
import { checkPhone, account, checkEmail, checkPwd } from "@/common/common.js";
import {
  smsVerification,
  addUsers,
  userList,
  resetPassword,
  deleteUser,
  addPermission,
  deletePermission,
  getPermission,
  changePassword,
  getUserInfo,
  SearchUser,
} from "@/api/userControl";
import jquery from "jquery";
import { Login } from "@/api/api";
// 引入base64加密
let base64 = require("js-base64").Base64;
var userJurisdiction = [
  { title: "水生态", value: false, num: 1 },
  { title: "大气生态", value: false, num: 2 },
  { title: "森林防火", value: false, num: 3 },
  { title: "智能井盖", value: false, num: 4 },
];
export default {
  components: {
    Top,
  },
  data() {
    // var checkLoginName = (rule, value, callback) => {
    //   let rge = /^[_0-9A-Za-z]{5,32}$/;
    //   if (value === "") {
    //     callback(new Error("账号不能为空"));
    //   } else if (!rge.test(value)) {
    //     callback(new Error("账号长度由5-32位大小写字母或数字或下划线组成"));
    //   } else {
    //     callback();
    //   }
    // };
    // var checkName = (rule, value, callback) => {
    //   let rge = /^[_0-9A-Za-z]{5,32}$/;
    //   if (value === "") {
    //     callback(new Error("账号不能为空"));
    //   } else if (!rge.test(value)) {
    //     callback(new Error("账号长度由5-32位大小写字母或数字或下划线组成"));
    //   } else {
    //     callback();
    //   }
    // };
    // var validatePass = (rule, value, callback) => {
    //   let rge = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!\W+$)[0-9A-Za-z\W]{8,32}$/;
    //   if (value === "") {
    //     callback(new Error("请输入密码"));
    //   } else if (!rge.test(value)) {
    //     callback(new Error("密码格式为8-32位字母 + 数字"));
    //   } else {
    //     callback();
    //   }
    // };
    // var validatePass2 = (rule, value, callback) => {
    //   let rge = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!\W+$)[0-9A-Za-z\W]{8,32}$/;
    //   if (value === "") {
    //     callback(new Error("请再次输入密码"));
    //   } else if (value !== this.userNewForm.password) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else if (!rge.test(value)) {
    //     callback(new Error("密码格式为8-32位字母 + 数字"));
    //   } else {
    //     callback();
    //   }
    // };
    // var checkLoginPassword = (rule, value, callback) => {
    //   let rge = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!\W+$)[0-9A-Za-z\W]{8,32}$/;
    //   if (value === "") {
    //     callback(new Error("请再次输入密码111"));
    //   } else if (value !== this.resetPasswordInif.newPassword) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else if (!rge.test(value)) {
    //     callback(new Error("密码格式为8-32位字母 + 数字"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      loginUserInfi: this.$store.state.loginUserInfi,
      pageNo: 1, //当前页
      pageNo1: 1, //当前页
      pageNo2: 1, //当前页
      pageNo3: 1, //当前页
      pageSize: 10, //默认每页10条
      pageSize1: 10, //默认每页10条
      pageSize2: 10, //默认每页10条
      pageSize3: 10, //默认每页10条
      total: 0, //总条数
      total1: 0, //总条数
      total2: 0, //总条数
      total3: 0, //总条数
      // cancel: false, //取消
      cishu: 0,
      inifuset: "",
      foot1: true,
      foot: false,
      foot3: false,
      foot4: false,
      daqi: false,
      shuisheng: false,
      senlin: false,
      jinggai: false,
      flag1: false, //
      previousPage: "", //监听用户是从哪个页面跳转过来的
      userQuanXian: [], //新表获取权限
      userListInifArr: [],
      resetPasswordBox: false, //重置密码弹窗状态
      resetUserInif: {}, //重置密码用户信息
      resetPasswordInif: {
        userInif: {}, //需要修改的用户信息
        newPassword: "", //重置新密码
        affirmNewPassword: "", //重置确认密码
      },
      totalTime: 60, //设置60s时间间隔
      content: "发送验证码",
      smsVerificationBox: false, //删除用户短信弹出框状态
      smsVerificationVal: "", //删除用户短信验证码值
      currentPage4: 1, //页数
      userListAll: 0,
      checkListAll: false, //全选按钮状态值
      checkList: userJurisdiction, //权限
      userSeek: "", //用户搜索值
      // ------------ 用户修改数据 -----------
      userAmend: false,
      userTSdata: {}, //需修改的用户暂存数据
      userAmendInfo: {
        name: "", //姓名
        bankAccountNumber: "", //账号
        phoneNumber: "", //手机号
        verificationCode: "", //验证码
        password: "", //密码
        newPassword: "", //新密码
        passwordAffirm: "", //确认密码
      },
      // ------------ 用户新增数据 -----------
      userNewForm: {
        name: "", //姓名
        bankAccountNumber: "", //账号
        phoneNumber: "", //手机号
        email: "",
        userIdentity: "", //创建用户时用户的身份
        // verificationCode: "", //验证码
        stats: undefined, //账号状态
        password: "", //密码
        passwordAffirm: "", //确认密码
      },
      formLabelWidth: "100px",
      dialogFormVisible: false,
      // ------------ 用户列表数据 ------------
      gridData: [],
      list: [],
      list2: [],
      userListArr:[],
      rules: {
        // password: [{ validator: validatePass, trigger: "blur" }],
        // name: [{ validator: checkName, trigger: "blur" }],
        // passwordAffirm: [{ validator: validatePass2, trigger: "blur" }],
        // bankAccountNumber: [{ validator: checkLoginName, trigger: "blur" }],
        // affirmNewPassword: [{ validator: checkLoginPassword, trigger: "blur" }],
      },
    };
  },
  // 拿去是从哪个页面跳转到当前页面
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
      vm.previousPage = from.path; //vm即this
    });
  },
  created() {
    this.userLists();
  },
  mounted() {
    // console.log(this.$route.path);

    this.userListInifArr = this.gridData;
  },
  computed: {
    dataArr() {
      let arr = this.gridData;
      arr.map((item, index) => {
        if (this.foot1 == true) {
          item["id"] = this.pageNo * this.pageSize + index + 1 - this.pageSize;
        }
        if (this.foot == true) {
          item["id"] =
            this.pageNo1 * this.pageSize1 + index + 1 - this.pageSize1;
        }
        if (this.foot3 == true) {
          item["id"] =
            this.pageNo2 * this.pageSize2 + index + 1 - this.pageSize2;
        }
        if (this.foot4 == true) {
          item["id"] =
            this.pageNo3 * this.pageSize3 + index + 1 - this.pageSize3;
        }

        this.userQuanXian.map((item2) => {
          if (item.accountId == item2.accountid) {
            item.permissionSettingArr.forEach((item3) => {
              if (item3.num == item2.permissionid) {
                item3.value = true;
              }
            });
          }
        });
      });
      return arr;
    },
    length() {
      return this.gridData.length;
    },
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.userLists();
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage;
      this.userLists();
    },
    handleSizeChange1(newSize) {
      this.pageSize1 = newSize;
      this.search();
    },
    handleCurrentChange1(newPage) {
      this.pageNo1 = newPage;
      this.search();
    },
    handleSizeChange2(newSize) {
      this.pageSize2 = newSize;
      this.search1();
    },
    handleCurrentChange2(newPage) {
      this.pageNo2 = newPage;
      this.search1();
    },
        handleSizeChange3(newSize) {
      this.pageSize3 = newSize;
      this.search3();
    },
    handleCurrentChange3(newPage) {
      this.pageNo3 = newPage;
      this.search3();
    },
    formaterNum(val) {
      return val.substr(0, 3) + new Array(1).join("*");
    },
    add() {
      this.dialogFormVisible = true;
    },
    input() {
      if (this.userSeek == '') {
        this.userLists()
        // this.gridData = this.userListArr;
      }
    },
    // 搜索
    async search() {
      this.foot1 = false;
      this.foot3 = false;
      this.foot = true;
      this.list = this.gridData;
      let res = await SearchUser({
        loginName: this.userSeek,
        pageNo: this.pageNo1,
        pageSize: this.pageSize1,
      });
      this.total1 = JSON.parse(res.data.traceId);
      this.gridData = JSON.parse(res.data.data);
      this.gridData.map((item) => {
        item["permissionSettingArr"] = [
          { title: "水生态", value: false, num: "1" },
          { title: "大气生态", value: false, num: "2" },
          { title: "森林防火", value: false, num: "3" },
          { title: "智能井盖", value: false, num: "4" },
        ];
      });
    },
    // 查电话
    async search3() {
      this.foot1 = false;
      this.foot = false;
      this.foot3 = false;
      this.foot4 = true;
      this.list = this.gridData;
      let res = await SearchUser({
        telephone:this.userSeek,
        pageNo: this.pageNo3,
        pageSize: this.pageSize3,
      });
      console.log(res)
      this.gridData = JSON.parse(res.data.data);
      this.total3 = JSON.parse(res.data.traceId);
      this.gridData.map((item) => {
        item["permissionSettingArr"] = [
          { title: "水生态", value: false, num: "1" },
          { title: "大气生态", value: false, num: "2" },
          { title: "森林防火", value: false, num: "3" },
          { title: "智能井盖", value: false, num: "4" },
        ];
      });
    },
    async search1() {
      this.foot1 = false;
      this.foot = false;
      this.foot3 = true;
      this.list = this.gridData;
      let res = await SearchUser({
        name: this.userSeek,
        pageNo: this.pageNo2,
        pageSize: this.pageSize2,
      });
      this.gridData = JSON.parse(res.data.data);
      this.total2 = JSON.parse(res.data.traceId);
      this.gridData.map((item) => {
        item["permissionSettingArr"] = [
          { title: "水生态", value: false, num: "1" },
          { title: "大气生态", value: false, num: "2" },
          { title: "森林防火", value: false, num: "3" },
          { title: "智能井盖", value: false, num: "4" },
        ];
      });
    },

    // 点击返回按钮回跳到进入页
    returnKeyBtn() {
      this.$router.push({ path: this.previousPage });
    },
    // 权限的添加删除
    permissionSettingBtn(data, val) {
      console.log("data", data);
      console.log("val", val);
      let stat = data.permissionSettingArr.every((item) => item.value == false);
      console.log("stat", stat);

      let cishu = 0;
      if (stat) {
        val.value = true;
        this.userLists();
        cishu++;
        this.$message.error("请至少保留一个业务系统访问权限！");
      } else {
        if (val.value == true && cishu == 0) {
          addPermission({ accountid: data.accountId, permissionid: val.num })
            .then((res) => {
              if (res.data == 0) {
                cishu = 0;

                this.$message.success("添加成功！");
                this.getPermission();

                // location.reload();
              } else {
                this.$message.error("ssokey认证失败");
                return;
              }
            })
            .catch((err) => {});
        } else if (val.value == true && cishu != 0) {
          return;
        }
        if (val.value == false) {
          deletePermission({ accountid: data.accountId, permissionid: val.num })
            .then((res) => {
              console.log(res);
              if (res.data == 0) {
                this.$message.error("删除成功！");
                this.getPermission();
                val.value = false;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    },
    // 创建新用户是检测是否勾选用户（至少一个）权限
    detectionJurisdiction() {
      return this.checkList.map((item) => {
        if (item.value == false) {
          return false;
        }
      });
    },
    // 用户密码重置确认按钮
    resetPasswordBtn() {
      let data = {};
      if (this.resetPasswordInif.newPassword == "") {
        this.$message({
          message: "请填写新密码！",
          type: "warning",
        });
        return;
      }

      if (this.resetPasswordInif.passwordAffirm == "") {
        this.$message({
          message: "请填写确认密码！",
          type: "warning",
        });
        return;
      }
      if (
        this.resetPasswordInif.passwordAffirm !==
        this.resetPasswordInif.newPassword
      ) {
        this.$message.error("密码不一致！请重新输入！");
        return;
      }
      data = {
        accountId: this.resetUserInif.accountId,
        newPassword: base64.encode(this.resetPasswordInif.passwordAffirm),
      };
      resetPassword(data)
        .then((res) => {
          if (res.data == 0) {
            this.resetPasswordBox = false;
            this.$message({
              message: "重置成功！",
              type: "success",
            });
            setTimeout(() => {
              this.userLists();
            }, 2000);
          }
        })
        .catch((err) => {
          this.$message.error(res.data.message);
          console.log(err);
        });
    },
    // 获取所有用户数据
    userLists() {
      var that = this;
      // that.foot = true;
      userList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      })
        .then((res) => {
          that.total = Number(res.data.traceId);
          if (res.data.code == "0000") {
            this.list = JSON.parse(res.data.data);
            this.list2 = JSON.parse(res.data.data);
            this.userListArr = JSON.parse(res.data.data);
            let arr = JSON.parse(res.data.data);
            arr.map((item) => {
              item["permissionSettingArr"] = [
                { title: "水生态", value: false, num: "1" },
                { title: "大气生态", value: false, num: "2" },
                { title: "森林防火", value: false, num: "3" },
                { title: "智能井盖", value: false, num: "4" },
              ];
            });
            if (JSON.stringify(arr) != "[]") {
              this.gridData = arr;
            }
          } else {
            this.$message.error(res.data.message);
            return;
          }
        })
        .catch((err) => {
          console.log(err);
        });

      setTimeout(() => {
        getPermission({ loginName: "" })
          .then((res) => {
            if (res.data) {
              this.userQuanXian = res.data;
            } else {
              this.$message.error(res.data.message);
              return;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }, 1000);
    },
    // 倒计时()
    getCountdown() {
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          this.totalTime = 60;
          this.content = "重新发送验证码";
          window.clearInterval(clock);
        }
      }, 1000);
    },

    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      }
      return "";
    },
    // 权限全选
    handleCheckAllChange(val) {
      if (val) {
        this.checkList.map((item) => {
          item.value = val;
        });
      } else {
        this.checkList.map((item) => {
          item.value = val;
        });
      }
    },
    // 新增用户的短信验证码按钮
    verifyBtn() {
      // 请求短信验证码
      smsVerification({ phone: this.userNewForm.phoneNumber }).then((res) => {
        if (res.data == 0) {
          this.getCountdown();
        }
      });
    },
    // 点击用户列表的删除按钮
    deleteUsers(val) {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUser({
            loginName: this.$store.state.loginUserInfi.loginName, //管理员账号
            dstloginName: val.loginName, //被删除成员账号
          })
            .then((res) => {
              if (res.data.code == "0000") {
                this.$message({
                  message: "已删除",
                  type: "success",
                });
                setTimeout(() => {
                  this.userLists();
                }, 2000);
              } else {
                this.$message.error(res.data.message);
                return;
              }
            })
            .catch((err) => {
              this.$message.error("删除失败！");
              console.log(err);
            });
        })
        .catch((err) => {
          this.$message("已取消！");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击用户列表的账号重置按钮
    resetThePassword(value) {
      this.$confirm("此操作将重置该账号密码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.resetPasswordBox = true;
          this.resetUserInif = value;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消密码重置",
          });
        });
    },
    // 点击修改弹窗的提交按钮
    // submitUserAmend() {
    //   changePassword({})
    //     .then((res) => {
    //       console.log(res);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //       this.$message.error("接口异常！");
    //     });
    //   if (true) {
    //     this.userAmend = false;
    //   }
    // },
    // 点击用户列表的修改按钮
    // handleClick(val) {
    //   this.userAmend = true;
    //   this.userTSdata = val;
    // },
    // 点击新增弹窗内的提交按钮
    async submit() {
      let data = {};
      if (this.userNewForm.name == "") {
        return this.$message.error("请输入姓名！");
      }
      if (!account(this.userNewForm.bankAccountNumber)) {
        return;
      }
      if (!checkPhone(this.userNewForm.phoneNumber)) {
        return;
      }
      if (!checkEmail(this.userNewForm.email)) {
        return;
      }
      if (!checkPwd(this.userNewForm.password)) {
        return;
      }
      if (this.userNewForm.password !== this.userNewForm.passwordAffirm) {
        return this.$message.error("密码不一致！");
      }
      if (!checkPwd(this.userNewForm.passwordAffirm)) {
        return;
      }

      if (this.userNewForm.userIdentity == "") {
        return this.$message.error("请选择用户身份！");
      } else if (
        this.daqi == false &&
        this.shuisheng == false &&
        this.senlin == false &&
        this.jinggai == false
      ) {
        return this.$message.error("请选择至少一个权限！");
      } else {
        data = {
          name: this.userNewForm.name,
          loginName: this.userNewForm.bankAccountNumber,
          roleIds: new Array(this.userNewForm.userIdentity),
          email: this.userNewForm.email,
          status: 1,
          telephone: this.userNewForm.phoneNumber,
          password: base64.encode(this.userNewForm.passwordAffirm),
        };
        // 新增用户
        let res1 = await addUsers(data);
        if (res1.data.code == "0000") {
          this.$axios

            .post("http://114.117.196.141:10098/grpt/users/single/submit", {
              data,
            })
            .then(function (response) {})
            .catch(function (error) {
              console.log(error);
            });
          let res2 = await getUserInfo({
            loginName: this.userNewForm.bankAccountNumber,
          });
          if (res2.data != "") {
            let arr1, arr2, arr3, arr4;
            if (this.daqi) {
              arr1 = await addPermission({
                accountid: res2.data.accountId,
                permissionid: 2,
              });
            }
            if (this.shuisheng) {
              arr2 = await addPermission({
                accountid: res2.data.accountId,
                permissionid: 1,
              });
            }
            if (this.senlin) {
              arr3 = await addPermission({
                accountid: res2.data.accountId,
                permissionid: 3,
              });
            }
            if (this.jinggai) {
              arr4 = await addPermission({
                accountid: res2.data.accountId,
                permissionid: 4,
              });
            }
            this.$axios.all([arr1, arr2, arr3, arr4]).then((a, b, c, d) => {
              if (a || b || c || d) {
                this.dialogFormVisible = false;

                this.$message({
                  message:
                    "账号为" +
                    this.userNewForm.bankAccountNumber +
                    "注册成功！！",
                  type: "success",
                });
                (this.userNewForm.name = "")(
                  (this.userNewForm.bankAccountNumber = "")
                )((this.userNewForm.userIdentity = ""))(
                  (this.userNewForm.email = "")
                )((this.userNewForm.phoneNumber = ""))(
                  (this.userNewForm.passwordAffirm = "")
                );
            
                  this.userLists();

              }
            });
          }
        } else {
          this.$message.error(res1.data.message);
          return;
        }
      }
    },
  },
};
</script>

<style scoped >
.warp {
  width: 100%;
  height: 100%;
}
/* 主要用途改变el-dialog的样式 */
.qx-eldialog >>> .el-dialog__body {
  padding: 0;
}
.qx-eldialog >>> .el-dialog__header {
  background-color: #252f4d;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bac2d6;
}
.qx-eldialog >>> .el-dialog__footer {
  background-color: rgba(27, 37, 64, 1);
  padding-top: 0;
}
/* 用户权限表el-table样式修改 */
.user-qx-table {
  background-color: rgba(27, 37, 64, 1);
  font-size: 16px;
}
.user-qx-table >>> tr {
  background-color: rgba(27, 37, 64, 1);
}
.user-qx-table >>> td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom-color: transparent;
}
.user-qx-table >>> .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}
.user-qx-table >>> th.el-table__cell {
  background-color: #2c4074;
}
.user-qx-table >>> th.el-table__cell.is-leaf {
  border-bottom: 1px solid transparent !important;
}
.user-qx-table >>> thead {
  color: #9aa3bd;
  font-size: 0.2rem;
}
.permissionSetting {
  color: #9aa3bd;
  font-size: 0.2rem;
}
.permissionSetting >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #9aa3bd;
  font-size: 0.2rem;
}
.permissionSetting >>> .el-checkbox__label {
  font-size: 0.2rem;
}
.user-qx-table >>> .el-button--mini,
.el-button--small {
  font-size: 0.2rem;
  color: #9aa3bd;
}
.user-qx-table >>> .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: transparent;
  height: 0;
}
/* //右边固定 */
.user-qx-table >>> .el-table__body .el-table__row.hover-row td {
  background-color: transparent;
}
::v-deep .inp1 {
  width: 250px;
  height: 20px !important;
  font-size: 12px;
}
::v-deep .el-input__inner {
  height: 30px !important;
  margin-top: 4px;
}
::v-deep .btns {
  height: 20px !important;
}
.btn-box {
  position: absolute;
  padding-right: 30px;
  right: 0;
  top: 50%;
  transform: translate(0, -80%);
}
.btn-box input {
  background-color: #28499d;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bac2d6;
  line-height: 200%;
  padding: 0 10px;
  margin-right: 15px;
}
.btn-box > input:last-child {
  margin-right: 0;
}
.user-qx-table {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bac2d6;
}
.btn {
  margin-bottom: 10px;
  display: flex;
  /* justify-content: flex-end; */
  padding: 0 20px;
  position: relative;
}
.btn > input {
  background-color: #28499d;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bac2d6;
  line-height: 200%;
  padding: 0 20px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
}
.xinzeng {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
}
/* 弹窗 */
.user-info >>> .el-form-item__label {
  display: inline-block;
  text-align-last: justify;
}
/* .user-info >>> .el-input__inner {
  width: 40%;
} */
/* 取消鼠标移动到el-table行时的hover */
.user-qx-table >>> tbody tr:hover > td {
  background-color: transparent !important;
}

/* 用户信息修改弹窗样式 */
.user-info >>> .el-dialog__header {
  background-color: #2c4074;
  padding: 10px;
}
.user-info >>> .el-dialog__headerbtn {
  top: 15px;
}
.user-info >>> .el-dialog__title {
  color: #9aa3bd;
}
.user-info >>> .el-form-item__content {
  width: 51%;
}
.phone-btn >>> .el-form-item__content {
  /* position: relative; */
  display: flex;
}
.phone-btn2 {
  margin-left: 15px;
}

/* 新增用户权限复选框 */
.jurisdiction-box {
  margin-left: 100px;
  width: 100%;
}
.jurisdiction-box >>> .el-checkbox {
  margin-right: 10px;
}
.jurisdiction-box >>> .el-checkbox:last-child {
  margin-right: 0;
}
.user-qx-table >>> .warning-row {
  background: #273150;
}
/* 分页 */
.fenye {
  display: flex;
  justify-content: flex-end;
  color: #9aa3bd;
  font-size: 0.2rem;
  background: #1b2540;
}
.fenye >>> .el-pagination__total {
  color: #9aa3bd;
}
.fenye >>> .el-pagination__jump {
  color: #9aa3bd;
}
.fenye >>> .el-pagination__sizes {
  color: #9aa3bd;
}
.fenye >>> .btn-prev {
  color: #9aa3bd;
  background-color: transparent;
}
.fenye >>> .btn-next {
  color: #9aa3bd;
  background-color: transparent;
}
.fenye >>> .el-pager li {
  color: #9aa3bd;
  background-color: transparent;
}
.fenye >>> .el-pager li:hover {
  color: #409eff;
}

/* 用户删除短信弹出框 */
.sms-code-box >>> .el-form-item__content {
  display: flex;
}

/* 返回按钮样式 */
.returnKeyBtn {
  margin-right: 20px;
  background: #28499d7a;
  color: #fff;
  border: none;
  color: #bac2d6;
  margin-top: 4px;
  height: 30px;
  font-size: 12px;
  line-height: 0px;
}
.user-info >>> .el-form .el-form-item .el-input__inner {
  border-color: #999;
}
.user-info >>> .el-form .el-form-item .el-radio__inner {
  border-color: #999;
}
.user-info >>> .el-form .el-form-item .el-checkbox__inner {
  border-color: #999;
}
.user-info >>> .el-form .el-form-item {
  margin-bottom: 5px;
}
.user-info >>> .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 0;
}
.user-info >>> .el-dialog__footer {
  padding-top: 0;
  padding-bottom: 10px;
}
.user-info >>> .el-form .el-form-item .el-form-item__error {
  right: 0;
  top: 50%;
  transform: translate(100%, -100%);
}
</style>